<template>
  <div id="product-detail-page" v-if="detail.id>0">
    <div class="page-title" :style="{
      top:(this.getSafeArea().top)+'px',
         }">
      <div id="back-button" @click="$router.back()">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>商品详情</span>
    </div>

    <div style="overflow-x: hidden;overflow-y: auto;position: relative; padding-bottom: 10px"
         :style="{
      top:(this.getSafeArea().top)+'px',
      height:(this.getWinSize().height-this.getSafeArea().top-100)+'px'
    }">
      <!--轮播图-->
      <div class="swiper-banner product-banner" id="my-viewer" :style="{height:this.getWinSize().width+'px'}">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(imageSrc,key) in detail.imageArr" :key="key">
            <img @click="showImage(imageSrc)" class="home-banner-image" :src="imageSrc">
          </div>
        </div>
        <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
      </div>

      <!--价格区域-->
      <div class="price-box">
        <div class="price-row">
          <div class="left">
            <div class="price">
              <div class="price-span"><span>￥</span>{{ ToMoney(detail.shopProductStock.price) }}</div>
              <div class="group-price-span" v-if="detail.shopProductStock.groupPrice>0">团购: <span>￥</span>{{ ToMoney(detail.shopProductStock.groupPrice) }}</div>
              <div class="group-price-span" v-if="detail.shopProductStock.isSeckill===1">
                秒杀: <span>抢购中</span>
              </div>
            </div>
          </div>
          <div class="right">
            <button class="record-button" @click="collect">
              <i class="el-icon" :class="isCollect?'el-icon-star-on':'el-icon-star-off'"></i>
              <span v-text="isCollect?'已收藏':'收藏'"></span>
            </button>
          </div>
          <div class="c"></div>
        </div>

        <div class="title">
          {{ detail.name }}
        </div>
        <div class="sale-nums-score">
          <div class="score-box">
            <el-rate
              class="score-item"
              v-model="(detail.score*0.05).toFixed(2)-0"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}">
            </el-rate>
          </div>
          <div class="text">
            <div class="item">总销量: <span v-text="detail.saleNums"></span></div>
            <div class="item">剩余库存: <span v-text="detail.shopProductStock.nums"></span></div>
          </div>
          <div class="c"></div>
        </div>
      </div>

      <shop-info-item v-if="shop.id>0" :shop="shop"/>

      <!--型号-->
      <div class="model-info" @click="chooseModel" v-if="detail.modelArr.length>1">
        <div class="title">已选型号:</div>
        <div class="value" v-text="detail.shopProductStock.model"></div>
        <div class="icon">...</div>
      </div>

      <!--页面内部导航区域-->
      <div id="product-detail">
        <div class="product-nav">
          <div class="item" :class="productShowType===0?'curr':''" @click="productShowType=0">
            <span>宝贝详情</span>
          </div>
          <div class="item" :class="productShowType===1?'curr':''" @click="productShowType=1">
            <span>规格参数</span>
          </div>
        </div>

        <!--评价区域-->
        <div class="reply-box" v-if="detail.replyList && detail.replyList.length>0">
          <div class="title-line">
            <div class="left">最新评价</div>
            <div class="right">
              <span v-if="detail.replyList.length>0"
                    @click="$router.push({name:'ProductReplyList',query:{id:detail.id,name:detail.name}})">查看全部 ></span>
            </div>
          </div>
          <div class="reply-list">
            <reply-list-item v-for="(reply,index) in detail.replyList" :key="index" :reply-params="reply"/>
          </div>
        </div>

        <!--规格参数-->
        <div id="product-parameters-title" v-show="productShowType===1">规格参数</div>
        <table id="product-parameters-table" border="1" v-show="productShowType===1">
          <tr>
            <td>长</td>
            <td>105.9cm</td>
          </tr>
          <tr>
            <td>宽</td>
            <td>51.5cm</td>
          </tr>
          <tr>
            <td>高</td>
            <td>10cm</td>
          </tr>
          <tr>
            <td>重量</td>
            <td>25kg</td>
          </tr>
        </table>

        <!--详情区域-->
        <div v-show="productShowType===0" style="width: 95%; padding: 0px; margin: 0 auto">
          <img style="width: 100%" :src="image" :key="index" v-for="(image,index) in detail.imageArr">
        </div>
      </div>

    </div>
    <!--底部导航-->
    <div class="product-bottom-nav">
      <div class="icon-list">
        <div class="item" @click="$router.push({
        name:'ShopHome',
        query:{
          id:shop.id
        }
        })">
          <i class="icon iconfont icon-dianpu"></i>
          <br>
          <span>店铺</span>
        </div>
        <div class="item" @click="$router.push('/Cart')">
          <i class="icon iconfont icon-gouwuchekong"></i>
          <br>
          <span>购物车</span>
        </div>
      </div>
      <div class="button-group">
        <el-button-group :class="{'has-group':detail.shopProductStock.groupPrice>0}">
          <el-tooltip placement="top" :hide-after="2000" :visible-arrow="false">
            <div slot="content">+1</div>
            <el-button size="medium" type="primary" icon="el-icon-shopping-cart-1" @click="addCart(detail)">加入购物车
            </el-button>
          </el-tooltip>
          <el-button size="medium" type="danger" @click="goToBuy" v-if="detail.shopProductStock.groupPrice===0">立即购买</el-button>
          <el-button size="medium" type="danger" @click="goToGroupBuy" v-if="detail.shopProductStock.groupPrice>0">拼团购买</el-button>
          <el-button size="medium" type="danger" @click="goToBuy" v-if="detail.shopProductStock.groupPrice>0">单独购买</el-button>
        </el-button-group>
      </div>
      <div class="c"></div>
    </div>
  </div>
</template>

<script>

import 'viewerjs/dist/viewer.css'
import Viewer from 'viewerjs'
import CartTools from '../tools/CartTools'
import ReplyList from '../common/ReplyList'
import ShopInfoItem from '../common/ShopInfoItem'
import ReplyListItem from '../common/ReplyListItem'

export default {
  name: 'ProductDetail',
  components: {ReplyListItem, ShopInfoItem, ReplyList},
  data () {
    return {
      productShowType: 0,
      collectLoading: false,
      shop: {
        id: 0,
        name: '',
        logo: this.NoImageUrl,
        collectNums: 0,
        productNums: 0,
      },
      detail: {
        id:0
      },
      isCollect: false
    }
  },
  mounted () {
    this.getDetail()
    if (this.CurrUser.IsLogin()){
      this.checkCollect()
    }
  },
  methods: {
    collect: function () {
      let $this = this
      $this.checkLoginAct(function () {
        $this.MyRequest($this.ApiDoNameShop + 'Member/collectProduct', {
          id: $this.$route.query.id
        }, function (data) {
          $this.isCollect = !$this.isCollect
          $this.$forceUpdate()
        }, function (data) {
          $this.successTip(data.message, 'error')
        })
      })
    },
    checkCollect: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Member/isCollectProduct', {
        id: $this.$route.query.id
      }, function (data) {
        $this.isCollect = data
        $this.$forceUpdate()
      }, function (data) {
        $this.successTip(data.message, 'error')
      })
    },
    getShopDetail: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Shop/getDetail', {
        id: $this.detail.shopId
      }, function (data) {
        $this.shop = data
        $this.$forceUpdate()
      }, function (data) {
        $this.successTip(data.message, 'error')
      })
    },
    setCacheParams:function (type) {
      var selectData={
        shop:{
          id:this.detail.shopId,
          name:this.detail.shopName,
          logo:this.detail.shopLogo
        },
        productList:[
          {
            nums:1,
            model:this.detail.shopProductStock.model,
            price:type!=='group'?this.detail.shopProductStock.price:this.detail.shopProductStock.groupPrice,
            name:this.detail.name,
            image:this.detail.image,
            id:this.detail.id
          }
        ]
      }
      localStorage.setItem("selectProductData",JSON.stringify(selectData))
    },
    // 单独购买
    goToBuy: function () {
      let $this=this
      $this.checkLoginAct(function () {
        $this.setCacheParams('one')
        $this.$router.push({
          name: 'ConfirmOrder',
          query: {
            type: 'one'
          },
        })
      })
    },
    // 团购跳转
    goToGroupBuy:function () {
      // this.setCacheParams('group')
      let $this=this
      $this.checkLoginAct(function () {
        $this.bus.$emit('GroupOrderJoinDialogCallBus',{
          shopId:$this.detail.shopId,
          shopLogo:$this.detail.shopLogo,
          shopName:$this.detail.shopName,
          id:$this.detail.id,
          name:$this.detail.name,
          image:$this.detail.image,
          model: $this.detail.shopProductStock.model,
          // price: $this.detail.shopProductStock.price,
          groupPrice: $this.detail.shopProductStock.groupPrice,
        })
      })
    },
    addCart: function () {
      let $this=this
      $this.checkLoginAct(function () {
        if ($this.detail.modelArr.length === 0) {
          // console.log('$this.detail',$this.detail)
          // 没有型号商品加入购物车
          CartTools.addProduct(Object.assign($this.detail, {nums: 1, model: '常规'}))
        } else {
          CartTools.addProduct(Object.assign($this.detail, {
            nums: 1,
            model: $this.detail.shopProductStock.model,
            price: $this.detail.shopProductStock.price,
          }))
        }
      })
    },
    chooseModel: function () {
      let $this = this
      $this.bus.$emit('ProductChooseModelDialogCallBus', 'productDetail', $this.detail, function (modelMap) {
        $this.detail.shopProductStock.model = modelMap.model
        $this.detail.shopProductStock.price = modelMap.price
        $this.detail.shopProductStock.saleNums = modelMap.saleNums
        $this.detail.shopProductStock.nums = modelMap.nums
        $this.detail.shopProductStock.groupNums = modelMap.groupNums
        $this.detail.shopProductStock.groupPrice = modelMap.groupPrice
        $this.detail.shopProductStock.isSeckill = modelMap.isSeckill
        $this.detail.shopProductStock.seckillEndTime = modelMap.seckillEndTime
        $this.$forceUpdate()
      })
    },
    // 处理轮播图
    handlerBanner: function () {
      let $this = this
      setTimeout(function () {
        var swiper = new Swiper('.swiper-banner', {
          // 底部分页导航
          pagination: {
            el: '.swiper-pagination',
          },
          // 自动播放
          autoplay: {
            delay: 2000,
            stopOnLastSlide: false,
            disableOnInteraction: false,
          },
          // 切换效果:    默认=>滑动    fade=>渐入   cube=>盒子旋转  coverflow=>平面切换 flip=>平面翻转
          // effect : 'fade',
        })
        // 处理轮播图点击
        const gallery1 = new Viewer(document.getElementById('my-viewer'))
        if (document.getElementsByClassName('reply-list').length > 0) {
          const gallery2 = new Viewer(document.getElementsByClassName('reply-list')[0])
        }
      }, 800)
    },
    // 获取详情
    getDetail: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'ShopProduct/getDetail', {
        id: $this.$route.query.id,
        model: $this.$route.query.model?$this.$route.query.model:'',
      }, function (data) {
        $this.detail.shopId = data.shopId
        $this.detail.shopLogo = data.shopLogo
        $this.detail.shopName = data.shopName
        $this.detail.name = data.name
        $this.detail.image = data.image
        $this.detail.imageArr = data.imageArr
        $this.detail.price = data.price
        $this.detail.oldPrice = data.oldPrice
        $this.detail.saleNums = data.saleNums
        $this.detail.score = data.score
        $this.detail.modelArr = data.modelArr
        $this.detail.replyList = data.replyList
        $this.detail.shopProductStock=data.shopProductStock
        $this.detail.id = data.id
        $this.getShopDetail()
        $this.$forceUpdate()
        $this.handlerBanner()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
  }
}
</script>

<style>
.swiper {
  width: 500px;
  height: 200px;
}

.swiper-slide {
  color: #FFFFFF;
  text-align: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
